<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>网易公开课</title>
        <style type="text/css">
            body{
                background-color: #f5f5f5;
            }
            a{
                text-decoration: none;
            }

            .container{
                width: 1180px;
                height: 705.6px;
                margin: 10px auto;
            }
            .header{
                width: 1180px;
                height:59.6px;
            }
            .header-left{
                width: 96px;
                height: 29.6px;
                float: left;
                margin-top: 15px;
                font-size: 24px;

            }
            .header-right{
                width: 84.8px;
                height: 13.6px;
                float: right;
                margin-top: 31px;
                font-size: 12px;
                color: #19b955;
            }
            .header-right:hover{
                text-decoration: underline;
            }
            .content{
                width: 1180px;
                height: 616px;
            }
            .content-first{
                width:1180px;
                height: 313px;
            }
            .content-second{
                width:1180px;
                height: 313px;
            }

            .item{
                width: 270px;
                height: 284px;
                background-color: white;
                float: left;
            }
            .item:hover{
                box-shadow: 0 2px 10px rgba(0,0,0,.25);
            }
            .item-m{
                margin-left:33.3px ;
            }
            .picture{
                width: 270px;
                height: 150px;
                overflow: hidden;/*这里非常重要*/
                position: relative;
            }
            .picture img{
                width: 100%;
                height: 100%;
                /*cover: 中文释义“覆盖”。保持原有尺寸比例。保证替换内容尺寸一定大于容器尺寸，宽度和高度至少有一个和容器一致。
                因此，此参数可能会让替换内容部分区域不可见。*/
                object-fit: cover;
                transition: all 1.5s;
            }
            .item:hover img{
                transform: scale(1.1,1.1);
            }
            .status{
                bottom: 0;
                right: 0;
                background-color: rgba(0,0,0,.5);
                position: absolute;/*绝对定位*/
                padding: 0 .5em;
                color: #fff;
                font-size: 12px;
                line-height: 22px;
            }
            .coupon{
                background-color: #ff4b36;
                position: absolute;
                padding: 0 .5em;
                color: #fff;
                font-size: 12px;
                line-height: 22px;
                top: 0;
            }
            .info{
                width: 270px;
                height: 96px;
            }
            .title{
                width: 250px;
                height: 43.2px;
                font-size: 18px;
                color: #333;
                line-height: 1.2;
                padding:14px 10px 0 ;
            }
            .subtitle{
                width: 250px;
                height: 13.6px;
                font-size: 14px;
                color: #999;
                margin-left: 10px;
                margin-top: 7px;
                white-space: nowrap;
                text-overflow: ellipsis;
            }
            .price{
                width: 270px;
                height: 24px;
                margin: 0 10px;
            }
            .number{
                color: red;
                font-size: 24px;
                font-weight: 500;
                line-height: 1;
            }
            .number2{
                margin-left: 10px;
                color: #999;
                font-size: 14px;
                font-weight: 400;
                text-decoration: line-through;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="header">
                <div class="header-left">精品课程</div>
                <div class="header-right">
                    <a href="https://vip.open.163.com/courses" style="color: #19ae55">更多精品课程&nbsp;></a>
                </div>
            </div>
            <div class="content">
                <div class="content-first">
                    <div class="item">
                        <a href="https://vip.open.163.com/courses/47DD0C1DE2D2E4A0D9DB0F43AAB7BBC4">
                            <div class="picture">
                                <img src="book.jpg" >
                                <div class="status">已完结</div>
                                <div class="coupon">限时特惠</div>
                            </div>
                            <div class="info">
                                <div class="title">100本豆瓣高分书，解锁人生进阶必备技能</div>
                                <div class="subtitle">7大维度打造核心能力，解决90%人生困惑</div>
                            </div>
                            <div class="price">
                                <span class="number"> ￥89.00</span>
                                <span class="number2">原价 ￥199.00</span>
                            </div>
                        </a>
                    </div>
                    <div class="item item-m">
                        <a href="https://vip.open.163.com/courses/47DD0C1DE2D2E4A0D9DB0F43AAB7BBC4">
                            <div class="picture">
                                <img src="book.jpg" >
                                <div class="status">已完结</div>
                                <div class="coupon">限时特惠</div>
                            </div>
                            <div class="info">
                                <div class="title">100本豆瓣高分书，解锁人生进阶必备技能</div>
                                <div class="subtitle">7大维度打造核心能力，解决90%人生困惑</div>
                            </div>
                            <div class="price">
                                <span class="number"> ￥89.00</span>
                                <span class="number2">原价 ￥199.00</span>
                            </div>
                        </a>
                    </div>
                    <div class="item item-m">
                        <a href="https://vip.open.163.com/courses/47DD0C1DE2D2E4A0D9DB0F43AAB7BBC4">
                            <div class="picture">
                                <img src="book.jpg" >
                                <div class="status">已完结</div>
                                <div class="coupon">限时特惠</div>
                            </div>
                            <div class="info">
                                <div class="title">100本豆瓣高分书，解锁人生进阶必备技能</div>
                                <div class="subtitle">7大维度打造核心能力，解决90%人生困惑</div>
                            </div>
                            <div class="price">
                                <span class="number"> ￥89.00</span>
                                <span class="number2">原价 ￥199.00</span>
                            </div>
                        </a>
                    </div>
                    <div class="item item-m">
                        <a href="https://vip.open.163.com/courses/47DD0C1DE2D2E4A0D9DB0F43AAB7BBC4">
                            <div class="picture">
                                <img src="book.jpg" >
                                <div class="status">已完结</div>
                                <div class="coupon">限时特惠</div>
                            </div>
                            <div class="info">
                                <div class="title">100本豆瓣高分书，解锁人生进阶必备技能</div>
                                <div class="subtitle">7大维度打造核心能力，解决90%人生困惑</div>
                            </div>
                            <div class="price">
                                <span class="number"> ￥89.00</span>
                                <span class="number2">原价 ￥199.00</span>
                            </div>
                        </a>
                    </div>
                </div>
                <div class="content-second">
                    <div class="item">
                        <a href="https://vip.open.163.com/courses/47DD0C1DE2D2E4A0D9DB0F43AAB7BBC4">
                            <div class="picture">
                                <img src="book.jpg" >
                                <div class="status">已完结</div>
                                <div class="coupon">限时特惠</div>
                            </div>
                            <div class="info">
                                <div class="title">100本豆瓣高分书，解锁人生进阶必备技能</div>
                                <div class="subtitle">7大维度打造核心能力，解决90%人生困惑</div>
                            </div>
                            <div class="price">
                                <span class="number"> ￥89.00</span>
                                <span class="number2">原价 ￥199.00</span>
                            </div>
                        </a>
                    </div>
                    <div class="item item-m">
                        <a href="https://vip.open.163.com/courses/47DD0C1DE2D2E4A0D9DB0F43AAB7BBC4">
                            <div class="picture">
                                <img src="book.jpg" >
                                <div class="status">已完结</div>
                                <div class="coupon">限时特惠</div>
                            </div>
                            <div class="info">
                                <div class="title">100本豆瓣高分书，解锁人生进阶必备技能</div>
                                <div class="subtitle">7大维度打造核心能力，解决90%人生困惑</div>
                            </div>
                            <div class="price">
                                <span class="number"> ￥89.00</span>
                                <span class="number2">原价 ￥199.00</span>
                            </div>
                        </a>
                    </div>
                    <div class="item item-m">
                        <a href="https://vip.open.163.com/courses/47DD0C1DE2D2E4A0D9DB0F43AAB7BBC4">
                            <div class="picture">
                                <img src="book.jpg" >
                                <div class="status">已完结</div>
                                <div class="coupon">限时特惠</div>
                            </div>
                            <div class="info">
                                <div class="title">100本豆瓣高分书，解锁人生进阶必备技能</div>
                                <div class="subtitle">7大维度打造核心能力，解决90%人生困惑</div>
                            </div>
                            <div class="price">
                                <span class="number"> ￥89.00</span>
                                <span class="number2">原价 ￥199.00</span>
                            </div>
                        </a>
                    </div>
                    <div class="item item-m">
                        <a href="https://vip.open.163.com/courses/47DD0C1DE2D2E4A0D9DB0F43AAB7BBC4">
                            <div class="picture">
                                <img src="book.jpg" >
                                <div class="status">已完结</div>
                                <div class="coupon">限时特惠</div>
                            </div>
                            <div class="info">
                                <div class="title">100本豆瓣高分书，解锁人生进阶必备技能</div>
                                <div class="subtitle">7大维度打造核心能力，解决90%人生困惑</div>
                            </div>
                            <div class="price">
                                <span class="number"> ￥89.00</span>
                                <span class="number2">原价 ￥199.00</span>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
        </div>

    </body>
</html>